import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  LoginFormPage,
  ProFormCheckbox,
  ProFormText,
  LoginForm
} from '@ant-design/pro-components';
import { message } from 'antd';
import { useNavigate } from 'react-router-dom';
import { login } from '@/api/url'
import './login.scss'




export default () => {
  const navigate = useNavigate()
  const onSubmit = async ({ account, password }) => {
    login({ account, password })
      .then(res => {
        console.log(res);
        if (res.error_code == 0) {
          navigate('/taskList');
        }
      })
      .catch(() => message.error('账号或密码错误'))
  };
  return (
    <div
      style={{
        backgroundColor: 'white',
        height: '100%',
        width: '100%',
        position:'relative'
      }}
    >
      

      <LoginForm
        onFinish={onSubmit}
        title={<h4 style={{  textAlign:'center',letterSpacing:4,marginBottom:150}}>算法数据加固平台</h4>}
        backgroundimageurl="https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png"
      >


        <ProFormText
          name="account"

          fieldProps={{
            size: 'large',
            prefix: <UserOutlined className={'prefixIcon'} />,
          }}
          placeholder={'请输入账号'}
          rules={[
            {
              required: true,
              message: '请输入用户名!',
            },
          ]}
        />
        <ProFormText.Password
          name="password"
          fieldProps={{
            size: 'large',
            prefix: <LockOutlined className={'prefixIcon'} />,
          }}
          placeholder={'请输入密码'}
          rules={[
            {
              required: true,
              message: '请输入密码！',
            },
          ]}
        />



        <div style={{ marginBlockEnd: 24 }}>
          <ProFormCheckbox noStyle name="autoLogin">
            自动登录
          </ProFormCheckbox>
          <a style={{ float: 'right' }} onClick={()=>message.info(<div>账号:test<br/>密码:test</div>)}>忘记密码 </a>
        </div>
      </LoginForm>
    </div>
  );
};

